<template>
  <div>
    <!--达到要求弹出div-->
    <el-card class="box-card" v-if="messageList && messageList.length" :body-style="{ padding: '0' }">
      <div class="notification-header">
        <i class="el-icon-bell"></i>
        <span>新订单通知</span>
      </div>
      <div class="notification-content">
        <div v-for="message in messageList" :key="message.orderNo" class="message-item">
          <div class="message-info">
            <div class="order-number">订单号: {{message.orderNo}}</div>
            <div class="order-number">下单门店: {{message.storeName}}</div>
            <div class="order-address">{{message.address}}</div>
           
          </div>
          <el-button type="success" size="mini" round @click="confirmReceiveMessage(message.orderNo)">
            <i class="el-icon-check"></i> 收到
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<!--最新订单消息弹窗-->
<script>
  import {resentOrderMessage, confirmReceiveOrderMessage} from "../../api/modules/app/messageApi.js"

  export default {
    name: "OrderMessage",
    data() {
      return {
        messageList: []
      }
    },
    mounted() {
      this.getMessage();
    },
    methods: {
      // 语音提醒来了新订单
      voiceTips(address) {
        let txt = '您有新的订单来了,' + address + ',请注意查看'
        new Audio('http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=12&tex=' + txt).play();
      },
      getMessage() {
        let that = this;
        setInterval(() => {
          that.getRecentMessage();
        }, 15000);
      },
      getRecentMessage() {
        resentOrderMessage().then(result => {
          if (result.data.length > this.messageList.length)
            this.voiceTips(result.data[result.data.length - 1].address)
          this.messageList = result.data;
        }).catch(result => {
          console.log(result.data)
        })
      },
      // 确认收到消息
      confirmReceiveMessage(orderNo) {
        let that = this;
        confirmReceiveOrderMessage(orderNo).then(result => {
          that.$notify.success(result.data);
          that.getRecentMessage();
        }).catch(result => {
          console.log(result.data)
        })
      }

      //
    }
  }

</script>

<style>
  .box-card {
    position: fixed;
    top: 70vh;
    right: 1vw;
    width: 380px;
    max-height: 29vh;
    z-index: 100;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    border: none;
  }
  
  .notification-header {
    background-color: #97AF13;
    color: white;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  
  .notification-header i {
    margin-right: 8px;
    font-size: 18px;
  }
  
  .notification-content {
    padding: 10px;
    max-height: calc(29vh - 50px);
    overflow-y: auto;
    background-color: #fff;
  }
  
  .message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.3s;
  }
  
  .message-item:last-child {
    border-bottom: none;
  }
  
  .message-item:hover {
    background-color: #f9f9f9;
  }
  
  .message-info {
    flex: 1;
  }
  
  .order-number {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
  
  .order-address {
    color: #666;
    font-size: 13px;
  }
</style>
